<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      申请退款
    </view>
    <view class="content">
      <view class="sec1">
        <view class="box">
          <image class="img" :src="detail.image" mode="" />
          <view class="rig">
            <view class="top">
              <text>{{ detail.name }}</text
              ><text>¥{{ detail.price }}</text>
            </view>
            <view class="cen">
              <text class="num">x{{ detail.number }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="sec2">
        <view class="sons" @click="open(1)">
          <text>退款类型</text>
          <view class="choice">
            <text v-if="!refundInfo">请选择</text>
            <text class="txt" v-else style="color: #333">{{ refundInfo }}</text>
            <image class="img" src="../../../static/x92.png" mode="" />
          </view>
        </view>
        <view class="sons" @click="open(2)">
          <text>退款原因</text>
          <view class="choice">
            <text v-if="!reason_info">请选择</text>
            <text class="txt" v-else style="color: #000">{{
              reason_info
            }}</text>
            <image class="img" src="../../../static/x92.png" mode="" />
          </view>
        </view>
        <view class="tkje">
          <view class="lef">
            <text>退款金额</text>
            <text
              >不可修改，最多￥{{ detail.true_amount }}，含发货邮费￥{{
                detail.shipping_fee
              }}</text
            >
          </view>
          <view class="rig">￥{{ detail.true_amount }}</view>
        </view>
      </view>
      <view class="sec3">
        <text>退款说明</text>
        <view class="wrap">
          <textarea
            class="tarea"
            maxlength="200"
            v-model="reasonInfo"
            placeholder="补充描述，有助于商家更好的处理售后问题"
            @input="onCeIntroductionInput"
          ></textarea>
          <view class="bot">
            <view class="contacts">
              <view class="tupian">
                <g-upload
                  ref="gUpload"
                  @imgDelete="imgDelete"
                  @chooseFile="chooseFile"
                  :mode="mode"
                  :control="true"
                  :columnNum="3"
                  :maxCount="3"
                ></g-upload>
              </view>
            </view>
            <view class="sizeView">
              <text class="textSize">{{ wordsnumber }}/200</text>
            </view>
          </view>
        </view>
      </view>
      <view class="sec4">
        <view class="btns" @click="sqrefund">提交申请</view>
      </view>
    </view>
    <!-- 退款类型 -->
    <uni-popup ref="popup1" type="bottom">
      <view class="boxs">
        <view class="selectPopup_one">
          <image
            src="../../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="close"
          ></image>
          <text style="margin: 0 auto">选择退款类型</text>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view
            class="row"
            v-for="(item, i) in refundList"
            :key="i"
            @click="tkType(item)"
          >
            {{ item.text }}
            <image
              v-if="refundType != item.id"
              class="img"
              src="../../../static/rido.png"
              mode=""
            />
            <image
              v-if="refundType == item.id"
              class="img"
              src="../../../static/ridos.png"
              mode=""
            />
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- 退款原因 -->
    <uni-popup ref="popup2" type="bottom">
      <view class="boxs">
        <view class="selectPopup_one">
          <image
            src="../../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="close"
          ></image>
          <text style="margin: 0 auto">选择退款原因</text>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view
            class="row"
            v-for="(item, i) in relist"
            :key="i"
            @click="checkradio(item)"
          >
            {{ item.reason_info }}
            <image
              v-if="reason_id != item.reason_id"
              class="img"
              src="../../../static/rido.png"
              mode=""
            />
            <image
              v-if="reason_id == item.reason_id"
              class="img"
              src="../../../static/ridos.png"
              mode=""
            />
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import gUpload from "@/components/g-upload/g-upload.vue";
export default {
  data() {
    return {
      token: "",
      wordsnumber: 0,
      toView: "",
      relist: [],
      refundType: "", // 退款类型 1:仅退款  2：退货退款
      refundInfo: "",
      refundList: [
        {
          id: 1,
          text: "仅退款",
        },
        {
          id: 2,
          text: "退货退款",
        },
      ],
      reason_id: "", // 退款原因
      reason_info: "",
      detail: "",
      order_sn: "", // 订单号
      imgarr: [],
      reasonInfo: "", // 原因描述
      mode: [],
    };
  },
  components: {
    gUpload,
  },
  onLoad(e) {
    this.token = uni.getStorageSync("token");
    this.refundReason();
    this.order_sn = e.order_sn;
    this.orderDetail(this.order_sn);
  },
  methods: {
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取订单详情
    async orderDetail(id) {
      const res = await this.$myRequest({
        url: "order/orderDetail",
        method: "POST",
        data: {
          order_sn: id,
        },
      });
      if (res.data.code == 1) {
        let that = this;
        this.detail = res.data.data;
        let refund_type = this.detail.refundReturn.refund_type;
        let reason_id = this.detail.refundReturn.reason_id;
        // 判断是否申请退款过
        if (this.detail.refundReturn.refund_id) {
          //退款类型
          if (refund_type == 1) {
            this.refundType = 1;
            this.refundInfo = "仅退款";
          } else if (refund_type == 2) {
            this.refundType = 2;
            this.refundInfo = "退货退款";
          }
          // 退款退货原因
          switch (reason_id) {
            case 1:
              this.reason_id = 1;
              this.reason_info = "不想要了";
              break;
            case 2:
              this.reason_id = 2;
              this.reason_info = "拍错商品";
              break;
            case 3:
              this.reason_id = 3;
              this.reason_info = "地址/电话填写有误";
              break;
            case 4:
              this.reason_id = 4;
              this.reason_info = "未按约定时间发货";
              break;
            case 5:
              this.reason_id = 5;
              this.reason_info = "协商一致退款";
              break;
            case 6:
              this.reason_id = 6;
              this.reason_info = "其他";
              break;
          }

          // 退款描述
          this.reasonInfo = this.detail.refundReturn.reason_info;
          // 退款凭证
          if (this.detail.refundReturn.pic_info) {
            this.imgarr = this.detail.refundReturn.pic_info;
            this.mode = this.imgarr;
          }
        }
      }
    },
    // 获取退款退货原因
    async refundReason() {
      const res = await this.$myRequest({
        url: "order/refundReason",
        method: "GET",
      });
      if (res.data.code == 1) {
        this.relist = res.data.data;
      }
    },
    // 选择退款退货原因
    checkradio(item) {
      this.reason_id = item.reason_id;
      this.reason_info = item.reason_info;
      this.close();
    },
    // 选择退款类型
    tkType(item) {
      this.refundType = item.id;
      this.refundInfo = item.text;
      this.close();
    },
    // 图片上传
    chooseFile(v) {
      this.uploadFileToServe(v);
    },
    // 添加图片
    uploadFileToServe(urlList) {
      let that = this;
      if (!urlList || urlList.length <= 0) {
        return;
      }
      const newlList = urlList.filter((item) => item.indexOf("localhost") < 0); // 获取接口返回的图片
      urlList = urlList.filter((item) => item.indexOf("localhost") != -1); // 处理数据，过滤掉接口返回的图片格式，上传正确的格式，避免接口报错
      that.imgarr = []; // 清空数组，防止重复添加
      for (let i = 0; i < urlList.length; i++) {
        uni.uploadFile({
          url: "https://www.123qifu.com/api/common/upload", //仅为示例，非真实的接口地址
          header: {
            token: that.token,
          },
          filePath: urlList[i],
          name: "file",
          formData: {},
          success: (uploadFileRes) => {
            const list = JSON.parse(uploadFileRes.data);
            const str = list.data.url;
            that.imgarr.push(str);
          },
        });
      }
      const ayy = newlList.map((item) => {
        // 处理成后台所需要的数据格式
        return item.split("https://www.123qifu.com")[1];
      });
      that.imgarr = that.imgarr.concat(ayy); // 上传的新图片和接口返回的图片合并
    },
    // 图片删除
    imgDelete(eq, i) {
      console.log(this.imgarr);
      return;
      // this.imgarr.splice(i, 1);
    },
    onCeIntroductionInput(event) {
      this.wordsnumber = event.detail.cursor;
    },
    // 申请退款
    async sqrefund() {
      if (this.refundType == "") {
        uni.showToast({
          title: "请选择退款类型",
          icon: "none",
        });
        this.$refs.popup1.open();
        return;
      }
      if (this.reason_id == "") {
        uni.showToast({
          title: "请选择退款原因",
          icon: "none",
        });
        this.$refs.popup2.open();
        return;
      }
      if (this.reasonInfo == "") {
        uni.showToast({
          title: "补充描述，有助于商家更好的处理售后问题",
          icon: "none",
        });
        return;
      }
      // if (this.imgarr == "") {
      //   uni.showToast({
      //     title: "上传凭证，有助于商家更好的处理售后问题",
      //     icon: "none",
      //   });
      //   return;
      // }
      const res = await this.$myRequest({
        url: "order/applyRefund",
        method: "POST",
        data: {
          order_sn: this.order_sn,
          refundType: this.refundType,
          reasonId: this.reason_id,
          reasonInfo: this.reasonInfo,
          images: this.imgarr.join(","),
        },
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
        uni.navigateTo({
          url: "./orderDetail?order_sn=" + this.order_sn,
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    //退款类型或者退款原因
    open(i) {
      if (i == 1) {
        this.$refs.popup1.open();
      } else {
        this.$refs.popup2.open();
      }
    },
    close() {
      this.$refs.popup1.close();
      this.$refs.popup2.close();
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  height: 100vh;
  position: relative;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  padding-top: 110rpx;
  overflow: hidden;
  .sec1 {
    width: 100%;
    min-height: 240rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 30rpx;
    margin-bottom: 20rpx;
    > text {
      display: block;
      width: 100%;
      font-size: 30rpx;
      color: #333333;
      font-weight: bold;
      padding-bottom: 15rpx;
      border-bottom: 1px solid #b6b6b6;
    }
    .box {
      display: flex;
      .img {
        display: block;
        width: 180rpx;
        height: 180rpx;
        object-fit: cover;
        margin-right: 30rpx;
        border-radius: 10rpx;
      }
      .rig {
        width: 75%;
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text:nth-child(1) {
            display: block;
            font-size: 28rpx;
            color: #333333;
            font-weight: bold;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          text:nth-child(2) {
            display: block;
            font-size: 28rpx;
            color: #333;
          }
        }
        .cen {
          font-size: 26rpx;
          color: #999999;
          margin-top: 25rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
  .sec2 {
    width: 100%;
    > text {
      display: block;
      width: 100%;
      font-size: 30rpx;
      color: #333333;
      font-weight: bold;
      padding-bottom: 15rpx;
      border-bottom: 1px solid #b6b6b6;
    }
    .sons {
      height: 84rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      box-sizing: border-box;
      padding: 0 30rpx;
      background: #fff;
      > text {
        font-size: 26rpx;
        color: #333333;
      }
      .choice {
        flex: 1;
        justify-content: flex-end;
        display: flex;
        align-items: center;
        > text {
          font-size: 26rpx;
          color: #999999;
        }
        .img {
          display: block;
          width: 12rpx;
          height: 18rpx;
          margin-left: 18rpx;
        }
      }
    }
    .tkje {
      height: 124rpx;
      box-sizing: border-box;
      padding: 30rpx;
      background: #fff;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-top: 20rpx;
      .lef {
        text:nth-child(1) {
          display: block;
          font-size: 26rpx;
          color: #333333;
        }
        text:nth-child(2) {
          display: block;
          font-size: 24rpx;
          color: #999999;
        }
      }
      .rig {
        font-size: 26rpx;
        color: #c52b2e;
      }
    }
  }
  .sec3 {
    width: 100%;
    min-height: 440rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 30rpx;
    margin-top: 20rpx;
    > text {
      display: block;
      width: 100%;
      font-size: 30rpx;
      color: #333333;
      font-weight: bold;
      padding-bottom: 20rpx;
    }
    .wrap {
      width: 100%;
      min-height: 320rpx;
      position: relative;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 20rpx;
      .tarea {
        width: 100%;
        height: 80rpx;
        background: none;
        border: none;
        resize: none;
        outline: none;
        font-size: 26rpx;
      }
      .bot {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: absolute;
        left: 30rpx;
        bottom: 20rpx;
        right: 30rpx;
        /deep/.contacts {
          width: 100%;
          .imglistItem {
            width: auto;
            height: auto;
            margin-bottom: 0;
          }
          .itemImg {
            width: 145rpx;
            height: 145rpx;
            margin-right: 20rpx;
          }
          .uploadControl {
            box-sizing: border-box;
            border-color: #999;
          }
          .tupian {
            display: flex;
            align-items: center;
          }
          .tianjia {
            display: block;
            width: 160rpx;
            height: 145rpx;
          }
          .pict {
            display: block;
            width: 145rpx;
            height: 145rpx;
            object-fit: cover;
            border-radius: 10rpx;
            margin-right: 10rpx;
          }
        }
        .sizeView {
          font-size: 26rpx;
          color: #999999;
        }
      }
    }
  }
  .sec4 {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .btns {
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background: #c52b2e;
      font-size: 30rpx;
      color: #ffff;
      font-weight: normal;
    }
  }
}
.boxs {
  width: 100%;
  min-height: 600rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  .selectPopup_one {
    display: flex;
    align-items: center;
    position: relative;
    height: 100rpx;
    width: 100%;
    font-size: 34rpx;
    color: #333333;
    box-sizing: border-box;
    border-bottom: 1rpx solid #e0e0e0;
    .clos {
      position: absolute;
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
  }
  .row {
    width: 690rpx;
    height: 100rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    .img {
      display: block;
      width: 38rpx;
      height: 38rpx;
    }
  }
  .row:last-child {
    border-bottom: none;
  }
}
</style>
